<template>
	<view class="mime">
		<view class="bg-block"></view>
		<view class="main">
			<view class="avatar" @click="handleToLogin">
				<uv-avatar shape="circle" size="80"></uv-avatar>
				<text class="text">{{ userStore.isLogin ? formatMobile : "点击登录" }}</text>
			</view>
			<view class="grid">
				<view class="item" @click="handleToMyOrder">
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-5" size="30" color="#f6d44c"></uni-icons>
					</view>
					<view class="text">订单</view>
				</view>
				<view class="item">
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-qiajuan" size="30" color="#f6d44c"></uni-icons>
					</view>
					<view class="text">领卷</view>
				</view>
				<view class="item">
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-xiaoxi" size="30" color="#f6d44c"></uni-icons>
					</view>
					<view class="text">订单</view>
				</view>
				<view class="item">
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-kefu" size="30" color="#f6d44c"></uni-icons>
					</view>
					<view class="text">客服</view>
				</view>
			</view>
			<view class="cells">
				<view class="more">更多功能</view>
				<uv-cell-group :border="false" :custom-style="{ backgroundColor: '#FFFFFF', borderRadius: '10px' }">
					<uv-cell title="服务介绍" clickable isLink size="large"></uv-cell>
					<uv-cell title="收费标准" clickable isLink size="large"></uv-cell>
					<uv-cell title="投诉建议" clickable isLink size="large" @click="handleToFeedback"></uv-cell>
					<uv-cell title="工人赚钱" clickable isLink size="large">
						<template #value>
							<text class="text-primary">可接用工订单</text>
						</template>
					</uv-cell>
					<uv-cell title="司机赚钱" clickable isLink size="large">
						<template #value>
							<text class="text-primary">可接运货、搬家订单</text>
						</template>
					</uv-cell>
					<uv-cell title="关于我们" clickable isLink size="large"></uv-cell>
					<uv-cell title="设置" clickable isLink size="large" @click="handleToSettings"></uv-cell>
				</uv-cell-group>
			</view>
		</view>
	</view>
</template>

<script setup>
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UvAvatar from "@/uni_modules/uv-avatar/components/uv-avatar/uv-avatar.vue";
import { useUserStore } from "../../store/user";
import { onShow } from "@dcloudio/uni-app";
import { computed, ref } from "vue";

const userStore = useUserStore();

const mobile = ref("");

const formatMobile = computed(() => {
	return mobile.value.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
});

const handleToMyOrder = () => {
	uni.switchTab({
		url: "/pages/order/order"
	});
};

const handleToFeedback = () => {
	uni.navigateTo({
		url: "/pages/opendb-feedback/add"
	});
};

const handleToLogin = () => {
	if (!userStore.isLogin) {
		uni.navigateTo({
			url: "/uni_modules/uni-id-pages/pages/login/login-withoutpwd"
		});
	}
};

const handleToSettings = () => {
	uni.navigateTo({
		url: "/pages/settings/settings"
	});
};

onShow(() => {
	const uniIdPagesUserInfo = uni.getStorageSync("uni-id-pages-userInfo");
	if (uniIdPagesUserInfo) {
		mobile.value = uniIdPagesUserInfo.mobile;
	}
});
</script>

<style lang="scss" scoped>
.mime {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f4f5f9;

	.bg-block {
		background: linear-gradient(to top, #f4f5f9, #f6d44c);
		height: 250px;
	}

	.main {
		padding: 20px;
		margin-top: -150px;

		.avatar {
			display: flex;
			align-items: center;

			.text {
				margin-left: 10px;
				color: #ffffff;
				font-size: 24px;
			}
		}

		.grid {
			margin-top: 20px;
			border-radius: 5px;
			background-color: #ffffff;
			padding-top: 20px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				margin-bottom: 20px;

				.icon {
					margin-bottom: 10px;
				}

				.text {
					color: #323751;
				}
			}
		}

		.cells {
			.more {
				font-size: 18px;
				padding: 20px 0;
				font-weight: bold;
			}
		}
	}
}
</style>
